<template>
  <div class="commentsList">
      <el-card v-for="(item,i) in message" :key="i">
        <h4>{{item.nickname}}</h4>
        <p>{{item.body}}</p>
        <div class="reply" v-show="item.reply.length">
          <h4>博主</h4>
          <p>{{item.reply}}</p>
        </div>
        <p class="time">
          <span>{{item.time}}</span>
        </p>
      </el-card>
  </div>
</template>

<script>
export default {
    props:{
        message:{
            type:Array,
            default(){
                return []
            }
        }
    }
}

</script>
<style scoped lang="scss">
@media screen and (min-width: 1200px){
    .commentsList {
      p {
        font-size: 14px;
        padding: 0;
        margin: 0;
      }
      .reply {
        margin-left: 120px;
      }
      .time {
        // margin-left: 900px;
        margin-left: 80%;
      }
      .el-card {
        margin-top: 25px;
      }
    }
}

@media screen and (max-width: 768px){
    .commentsList {
      p {
        font-size: 14px;
        // padding: 0;
        margin: 0;
      }
      .time {
        // margin-left: 130px;
        margin-left:35%;
        margin-top:10px;
      }
      .reply {
        margin-left: 25px;
      }
      .el-card {
        margin-top: 15px;
      }
    }
}
</style>